import React from 'react';
import classnames from 'classnames';
import ReSlider from '../ReSlider';
import ReNumberTextField from '../ReNumberTextField';
import './index.less';
export default class view extends React.Component {
    static propTypes = {
        className: React.PropTypes.string,
        min: React.PropTypes.number,
        max: React.PropTypes.number,
        value: React.PropTypes.number,
        toFixed: React.PropTypes.number,
        onChange: React.PropTypes.func
    };

    static defaultProps = {
        min: 0,
        max: 100,
        value: 50,
        toFixed: 2
    }

    constructor(props, context) {

        super(props, context);


        // init state;
        this.state = {
            min: props.min,
            max: props.max,
            inputValue: props.value + '',
            value: props.value,
            toFixed: props.toFixed
        };

        this.isReceiveProps = true;
    }
    componentWillMount() {
        this._isMounted = true;

    }

    componentDidMount() {

    }

    componentWillUnmount() {
        this._isMounted = false;
    }

    componentWillReceiveProps({ min, max, value }) {
        if (this.isReceiveProps) {
            this.setState({
                min,
                max,
                value,
                inputValue: value + ''
            })
        }
    }

    handleUpdate = (data) => {
        this.setState({
            value: data.value,
            inputValue: data.value + ''
        });
        this.props.onChange && this.props.onChange({
            min: this.state.min,
            max: this.state.max,
            value: data.value
        });
    }

    handleInputChange = (e, num) => {
        this.isReceiveProps = false;
        let value = +num,
            inputValue = num;
        this.setState({
            value,
            inputValue
        });
        this.props.onChange && this.props.onChange({
            min: this.state.min,
            max: this.state.max,
            value
        });

    }

    render() {
        const classNames = classnames({
            'orin-sw-reslidertext-root': true,
            [this.props.className]: this.props.className ? true : false
        })
        return (
            <div className={ classNames } >
                <div className="left-slider">
                    <ReSlider
                        min={this.state.min}
                        max={this.state.max}
                        value={this.state.value}
                        toFixed={this.state.toFixed}
                        onUpdate={ this.handleUpdate}
                        onDragStart={ () => this.isReceiveProps = false}
                        onDragStop={ () => this.isReceiveProps = true}
                    />
                </div>
                <div className="right-text">
                   <ReNumberTextField 
                        max={this.state.max}
                        min={this.state.min}
                        value={ this.state.inputValue }
                        onChange={ this.handleInputChange }
                        onBlur={() => this.isReceiveProps = true}
                   />
                </div>
            </div>
        );
    }
}
